<h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_FAILED_EVENTS.TITLE' | translate }}</h2>
<p class="failed-events-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_FAILED_EVENTS.DESCRIPTION' | translate }}</p>

<div class="table-wrapper">
  <cnsl-refresh-table (refreshed)="loadEvents()" [loading]="loading$ | async">
    <table [dataSource]="eventDataSource" mat-table class="table" aria-label="Elements">
      <ng-container matColumnDef="viewName">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.VIEWNAME' | translate }}</th>
        <td mat-cell *matCellDef="let event">{{ event.viewName }}</td>
      </ng-container>

      <ng-container matColumnDef="database">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.DATABASE' | translate }}</th>
        <td mat-cell *matCellDef="let event">{{ event.database }}</td>
      </ng-container>

      <ng-container matColumnDef="failedSequence">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILEDSEQUENCE' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <span>{{ event?.failedSequence }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="failureCount">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILURECOUNT' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <span>{{ event?.failureCount }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="lastFailed">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.LASTFAILED' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <span>{{ event?.lastFailed | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="errorMessage">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.ERRORMESSAGE' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <span class="failed-event-error-message">{{ event?.errorMessage }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td class="back" mat-cell *matCellDef="let event">
          <cnsl-table-actions>
            <button
              actions
              color="warn"
              mat-icon-button
              matTooltip="{{ 'IAM.FAILEDEVENTS.DELETE' | translate }}"
              (click)="cancelEvent(event.viewName, event.database, event.failedSequence)"
            >
              <i class="las la-minus-circle"></i>
            </button>
          </cnsl-table-actions>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
      <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns"></tr>
    </table>
    <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="eventDataSource.data.length || 0">
    </cnsl-paginator>
  </cnsl-refresh-table>
</div>
